<template>
  <div>
    <div class="block">
      <header>
        <h2 class="required">消耗产品</h2>
      </header>
      <section>
        <el-row class="block-item">
          <el-col :span="21">
            <!-- <div>&nbsp;</div> -->
            <el-button type="primary" @click="onOpenImportProduct">模板导入产品</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button type="text" @click="onGetProductTemplate">模板下载</el-button>
          </el-col>
          <el-col :span="3" class="right">
            <el-button type="primary" @click="onOpenProductDialog">添加消耗产品</el-button>
          </el-col>
        </el-row>
        <el-editable :columns="COLUMNS_PRODUCT" :payload="payload_products" @reload="reloadData">
          <template v-slot:default-count="{ row }">
            <div>
              <el-input-number
                v-model="row.count"
                size="small"
                :min="1"
                :max="10"
                @change="onChangeCount"
              ></el-input-number>
            </div>
          </template>
          <template v-slot:default-hospital="{ row }">
            <div>
              <el-select v-model="row.hospital"></el-select>
            </div>
          </template>
          <template v-slot:default-opt="{ row, $index }">
            <el-button @click="onDeleteProduct(row, $index)">删除</el-button>
          </template>
        </el-editable>
      </section>
    </div>
  </div>
</template>

<script>
import { ProductAddDialogService } from '~/modules/product/product-add.dialog.module';
import { UploadExcelDialogService } from '~/modules/upload/upload-excel.dialog.module';
import * as CONSTS from './purchase-products-list.const';
import ElEditable from '@components/el-editable';
import { IndexService } from './purchase-products-list.service';
const service = new IndexService();
export default {
  components: {
    ElEditable
  },
  props: {
    products: Array,
    type: {
      type: String,
      default: 'consume'
    },
    operationType: String
  },
  computed: {
    productAddDialogService: function() {
      return new ProductAddDialogService(this.$axios, { type: this.type });
    },
    uploadExcelDialogService: function() {
      return new UploadExcelDialogService(this.$axios);
    }
  },
  data() {
    return {
      ...CONSTS,
      _products: [],
      payload_products: {},
      pager: {
        number: 1,
        size: 20
      }
    };
  },
  watch: {
    products: {
      handler: function(val, oldVal) {
        if (val !== undefined) {
          this._products = val;
          let startIndex = this.pager.number - 1;
          let endIndex = this.pager.size;
          this.payload_products = service.getPayload(this._products, this.pager, startIndex, endIndex);
        }
      },
      immediate: true
    }
  },
  methods: {
    //前端分页逻辑
    reloadData(pager) {
      let startIndex = (pager.number - 1) * pager.size;
      let endIndex = pager.number * pager.size;
      this.payload_products = service.getPayload(this._products, pager, startIndex, endIndex);
      this.pager = pager;
    },
    onDeleteProduct(row, index) {
      let startIndex = (this.pager.number - 1) * this.pager.size;
      this._products.splice(startIndex + index, 1);
      this.$emit('update:products', this._products);
    },
    onChangeCount() {
      this.$emit('update:products', this._products);
    },
    onOpenProductDialog() {
      this.productAddDialogService
        .create({
          title: '添加消耗产品',
          query: { operationType: this.operationType },
          confirmButtonClickHandler: (data = {}) => {
            // console.log(data);
            // console.log('取到数据了！');
          }
        })
        .mount();
    },
    onOpenImportProduct() {
      this.uploadExcelDialogService
        .create({
          title: '模板导入',
          query: {},
          progressCompleteHandler: (data = {}) => {
            // console.log(data);
            // console.log('进度到100%');
          }
        })
        .mount();
    },
    onGetProductTemplate() {}
  }
};
</script>

<style></style>
